﻿@using Microsoft.Ajax.Utilities
@using WebTV_Kickstarter
@model WebTV_Kickstarter.Project

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@Html.DisplayFor(model => model.Title)</h2>

<div>
    <h4>Gestelde Doelen</h4>
    <hr style="width: 515px; margin-left: 0;" />
    <dl class="dl-horizontal">
        @foreach (var item in (List<string[]>)ViewData["goals"])
        {
            <dt>
                <strong>@(item[0])</strong> 
            </dt>
            <dd>
               <div class="meter">
                  <span style="width: @((Convert.ToInt32(item[3]) > 99) ? "100" : item[3])%">@(item[3])%</span>
               </div>
               @(ViewBag.isAdmin ? Html.ActionLink("Verwijder |", "Delete/" + item[5], "Goal") : null)
               @(ViewBag.isAdmin ? Html.ActionLink("| Wijzigen", "Edit/" + item[5], "Goal") : null)
            </dd>
        }
        @(ViewBag.isAdmin ? Html.ActionLink("Goal toevoegen", "Create/"+Model.Id, "Goal") : null)
    </dl>
    <hr style="width: 515px; margin-left: 0;" />
    <h4>Additionele Info</h4>
    <dl class="dl-horizontal">

        <dt>
            Totaal gedoneerd
        </dt>

        <dd>
            @string.Format("{0:C}",((decimal)Model.TotalAmount)).Replace('$','€')
        </dd>

        <dt>
            Eigenaar
        </dt>
        
        <dd>
            @Html.DisplayFor(model => model.User.Name)
        </dd>
        
        <dt>
            Ontvangen score
        </dt>

        <dd>            
            <div class="meter @{


            double cijfer = Math.Round((double)Model.TotalRating / (double)Model.NumberOfVotes, 1);
            
            @((cijfer < 6.0) ? "red" : ((cijfer < 8.0)? "orange" : ""))

            } nostripes">
                <span style="width: @Math.Round(((double)Model.TotalRating / (double)Model.NumberOfVotes)*10.0 ,1)%">@Math.Round((double)Model.TotalRating / (double)Model.NumberOfVotes, 1).ToString().Replace("NaN","Nog niet beoordeeld")</span>
            </div>
        </dd>
        
        <dt>
            Aantal reacties
        </dt>

        <dd>
            @Html.DisplayFor(model => model.NumberOfMessages)
        </dd>

    </dl>

    <hr style="width: 515px; margin-left: 0;" >
    <div>
        <h4>Beschrijving</h4>
        @Html.DisplayTextFor(model => model.Description)
    </div>
    <hr style="width: 515px; margin-left: 0;" />
    <div style="width:100%; height: 50px; margin-top: 30px;">
        <a style="background-color:#cb282c; width:200px; height:70px; color:#ffffff; font-size: 23px; padding:20px; border-radius:7px; border: 1px solid #000000;" href="~/Donation/Donate/@Html.Raw(Model.Id)">Doneer</a>
        <a style="background-color: #f37021; width: 200px; height: 70px; color: #ffffff; font-size: 23px; padding: 20px; border-radius: 7px; border: 1px solid #000000; " href="~/Rating/Beoordeel/@Html.Raw(Model.Id)">Beoordeel</a>
        <a style="background-color: #f9a625; width: 200px; height: 70px; color: #ffffff; font-size: 23px; padding: 20px; border-radius: 7px; border: 1px solid #000000; " href="~/Message/Create/@Html.Raw(Model.Id)">Reageer</a>
    </div>
</div>
    <hr style="width: 515px; margin-left: 0;" />

<h4>Reacties</h4>
<form method="POST">
    <dl class="dl-horizontal">
        <dt>Plaats reactie</dt>
        <dd><textarea id="plaatsReactie" rows="6" cols="65" name="Context">Plaats hier uw reactie</textarea></dd>  
        <dt><input type="hidden" name="ProjectId" value="@Model.Id" id="ProjectId"/></dt>
        <dd><input type="button" id="verzendReactie" value="Plaats reactie"/> <input value="Refresh reacties" type="button" id="KlikKnop" /></dd> 
    </dl>
</form>
<hr />
<dl class="dl-horizontal" id="textVak">
    <dt></dt>
    <dd>
</dl>

<script>
    $("#KlikKnop").click(function(){
        $.ajax({

            url: "../../Project/GetReacties/@Model.Id",

            cache: false,

            
        })
        .done(function (html) {
            //refresh the content of "#results"
            $("#textVak").empty();
            $("#textVak").append(html);
        });
    });

    $("#verzendReactie").click(function () {
            var obj = {
                Context: $("#plaatsReactie").val(),
                ProjectId: $("#ProjectId").val()
            };
            $.ajax({
                type: "POST",
                url: "../../Project/SetReactie/",
                cache: false,
                data: obj
        })
        .done(function (html) {
            //refresh the content of "#results"
            $("#textVak").append(html);
        });
    }); 
</script>
<p>
    @((ViewBag.isAdmin) ? Html.ActionLink("Aanpassen", "Edit", new { id = Model.Id }) : null) |
    @Html.ActionLink("Terug naar overzicht", "Index")
</p>


